<template>
	<view class="page">
		<view class="nums_c">
			<view @click="tabChange(0)" class="item" :class="{active:active===0}" hover-class="hover">
				团队人数({{ teamNum || 0 }})</view>
			<view class="line"></view>
			<view @click="tabChange(1)" class="item" :class="{active:active===1}" hover-class="hover">
				直推人数({{ directPushNum || 0 }})</view>
			<view class="line"></view>
			<view @click="tabChange(2)" class="item" :class="{active:active===2}" hover-class="hover">
				我的客户({{ customer_count || 0 }})</view>
		</view>
		<list :reqUrl="reqUrl" ref="listInstance">
			<template v-slot=" { list }">
				<view class="team" v-for="item in list" :key="item.rember_id">
					<view class="face">
						<fr-image radius="50%" style="width: 100%;height: 100%;" mode="aspectFill"
							:src="item.head_img" />
					</view>
					<view class="right_content">
						<view class="nick one-line">{{ item.nickname }}</view>
						<view class="content">
							<template v-if="active!==2">
								<view class="colum2">
									<view class="item">
										<view class="des">业绩：{{ item.teamTotal || 0 }}</view>
									</view>
								</view>
								<view class="des">时间：{{ item.create_at }}</view>
							</template>
							<view v-else class="des">ID：{{item.user_id}}</view>
						</view>
					</view>
					<view class="tag_c">
						<view v-if="item.agentDa&&item.agentDa.dls_name" class="theme_color">
							<uni-tag :text="item.agentDa.dls_name" type="primary" />
						</view>
						<view v-if="item.disDa&&item.disDa.dis_name" class="special_color">
							<uni-tag :text="item.disDa.dis_name" type="primary" />
						</view>
					</view>
				</view>
			</template>
		</list>
	</view>
</template>

<script setup>
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import request from '@/utils/common/request/index';
	import { useGetThemColor } from '@/hooks/useGetThemColor';

	const { primaryColor } = useGetThemColor();

	let teamNum = ref(0);
	let directPushNum = ref(0);
	let customer_count = ref(0);
	const getTeamCount = () => {
		return request({
			url: '/api/usteamcount'
		}).then(data => {
			teamNum.value = data.all_count;
			directPushNum.value = data.super_count;
			customer_count.value = data.customer_count;
		});
	};
	getTeamCount();

	// * tab
	let active = ref(0);
	let reqUrl = ref('/api/usesuperuser');
	const tabChange = index => {
		if (active.value === index) return;
		active.value = index;
		reqUrl.value = ['/api/usesuperuser', '/api/usesuperuser?distance=1', '/api/usecustomer'][index];
		listInstance.value.resetRequest()
	};


	const listInstance = ref(null);
	// * 下拉刷新事件
	onPullDownRefresh(() => {
		Promise.all([getTeamCount(), listInstance.value.resetRequest()]).finally(() => {
			uni.stopPullDownRefresh();
		});
	});
	// * 页面触底事件，不能删除，否则不能触发list组件触底事件
	onReachBottom(() => {});
</script>

<style lang="scss" scoped>
	.nums_c {
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 14px;
		height: 44px;
		background-color: #fff;

		.item {
			color: #515151;
		}

		.active {
			color: v-bind(primaryColor) !important;
		}

		.line {
			margin: 0 20px;
			width: 1px;
			height: 13px;
			background-color: #999;
		}
	}

	.team {
		position: relative;
		display: flex;
		padding: 12px 14px;
		border-radius: 10px;
		background-color: #fff;

		&+.team {
			margin-top: 10px;
		}

		.face {
			flex-shrink: 0;
			width: 60px;
			height: 60px;
			overflow: hidden;
		}

		.right_content {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 2px 0 0 10px;

			.nick {
				margin-bottom: 4px;
				font-weight: bold;
			}

			.content {
				flex: 1;
			}

			.colum2 {
				display: flex;
			}

			.item {
				width: 50%;
			}

			.des {
				margin-bottom: 3px;
				font-size: 12px;
				color: #999;
			}
		}

		.tag_c {
			position: absolute;
			right: 14px;
			top: 10px;
			display: flex;

			.theme_color {
				::v-deep .uni-tag {
					padding: 1px 6px !important;
					background: v-bind(primaryColor);
					border: 0;
				}
			}

			.special_color {
				margin-left: 4px;

				::v-deep .uni-tag {
					padding: 1px 6px !important;
					background: #FFA200;
					border: 0;
				}
			}
		}
	}
</style>
<style>
	/*只能在这里设置*/
	page {
		background-color: #f5f5f5;
	}
</style>